<%--
  Created by IntelliJ IDEA.
  User: 28101
  Date: 2021/9/23
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <title>轮播图</title>
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .lunbodiv{
            width: 90%;
            height: 420px;
            margin-left: 120px;
        }
    </style>
</head>
<body>

    <div class="lunbodiv">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <jstl:forEach var="commodityList" items="${commodityList }">
                    <div class="swiper-slide">
                        <button onclick="toshop('/CommodityServlet?method=getCommodityById&pid=${commodityList.pid}')" style="width: 100%;height: 100%;border: none">
                            <img src="/imgs/${commodityList.commodityImgs[0].src}" width="100%" height="100%"/>
                        </button>
                    </div>
                </jstl:forEach>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script src="/js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            cssMode: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination'
            },
            mousewheel: true,
            keyboard: true,
        });

        function toshop(url) {
            window.location.href = url;
        }
    </script>

</body>
</html>
